YUI.add("inputField", function(Y) {
    var Lang = Y.Lang,
        Node = Y.Node;
 
    /* InputField Events
     * participantBadge:rolledOver 
     */
    
    /* inputField constructor */
    var InputField = function(config) {
        InputField.superclass.constructor.apply(this, arguments);
    } 
    InputField.NAME = "inputField";
 
   
    /* Default InputField Attributes */
    InputField.ATTRS = {
      
    };
 
    /* Extend the base Widget class */
    Y.extend(InputField, Y.Widget, {
 		
        /*
         * Initialization Code: Sets up privately used state
         * properties, and publishes the events InputField introduces
         */
        initializer : function(config) { 
 			
 
            // Event handles - mouse over is set on the delegate
            // element, mousemove and mouseout are set on the trigger node
            this._eventHandles = {
              
            };
 
            // Show/hide timers
            this._timer = {
               hideShowMenu:null 
            };
             
            
 			this._editor;            
           Y.on("domready", Y.bind(this.initWidget , this));
            
            
           
            
        }, 
     	initWidget : function() {    		
     		
        	var html = '<div id="inputContour" ><div><div id="inputTable"><table border="0" cellspacing="0" cellpadding="0" width="100%" ><tr ><td valign="middle">';
        	html += '<textarea id="editor" name="editor"></textarea></td><td  style="width:10px;">'; 
			html += '<div id="toggle-emoticon" class="toggle-emoticon" ></div></td><td  style="width:10px;">'; 
			html += '<div id="toggle-editor" class="toggle-editor"></div></td><td  style="width:10px;"> '; 
			html += '<div id="sendButton">Send </div></td></tr></table>';
			var str = '<table><tr></div>'; 
			
			var emoticonOverlayContainer = Y.Node.create('<div id="emoticonsOverlay"></div>');
			this.get('contentBox').appendChild(emoticonOverlayContainer); 
	 
    		this.emoticonsOverlay = new Y.Overlay({
        		contentBox:emoticonOverlayContainer, 
        		xy:[300, 150]
    		});    
			
			var index =0;
			for (var i=1;i<7;i++)
			{
				for(var j=0;j<10; j++)
				{
					index++;
					str += "<td style='width:30px;text-align:center;'><img  src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/"+(index)+".gif'  ></td>";
				}
				str += "</tr><tr>";
			}
			
			str += "</table>";
			
			Y.get("#emoticonsOverlay").set("innerHTML" , str);
	
	 		this.get("contentBox").set("innerHTML",html);
			 
			
			var myConfig = {
						height: "20px",
						width: "100%",
						dompath:false,  
						focusAtStart:false,  
						removeLineBreaks:true,
						toolbar: {  
							titlebar: false,
							buttons: [
							   { group: 'textstyle', label: false,
							       buttons: [
							       
								    //{type:'push', label:'Toggle', value: 'editoggle'},
		                            {type:'separator'},
								    {type:'push', label:'Bold', value: 'bold' , id :'boldBtn'},
								    {type:'push', label:'Italic', value: 'italic' },
								    {type:'push', label:'Underline', value: 'underline' }, 
								    {type:'color', label:'Font Color', value: 'forecolor' },
								   {type:'separator'},
								    {type:'select', label:'Arial', value:'fontname',
								      menu: [
								          { text: 'Arial', checked: true },
								          { text: 'Arial Black' },
								          { text: 'Comic Sans MS' },
								          { text: 'Tahoma' },
								          { text: 'Verdana' }
								      ]
								    },
								    {type:'separator'},
								    {type:'spin', label: '10', value:'fontsize', range:[6,32]}
								   ]
							   } 
							]
						}
					}; 
					
			
			this._editor = new YAHOO.widget.SimpleEditor('editor', myConfig);
			this._editor._defaultToolbar.buttonType = 'advanced'; 
			
			
			
			this._editor.on('afterRender', function(e,that) {  
				     	  			  
    			Y.on("click" , Y.bind(that.toggleToolbar, that), "#toggle-editor"); 
		    	that._editor.toolbar.setStyle("visibility" , "hidden");
    			that.toggleToolbar(null, true);  
		    	
				that.toggleMenu("hidden"); 
				that.get('contentBox').setStyle("visibility" , "visible");
			} , this);
		 
		 
		 	this._editor.on('editorWindowBlur', function(e, that){
		 		that._timer.hideShowMenu = Y.later(300, that, that.toggleMenu , "hidden"); 
		 	}, this);
		 
			this._editor.on('editorWindowFocus', function(e, that){
			 	that._timer.hideShowMenu = Y.later(300, that, that.toggleMenu , "visible"); 
			}, this);
		 
		// events to handle pressing enter..
		this._editor.on('editorKeyDown', function(e, that){ 
		   if (e.ev.keyCode==13) {
				that._editor.saveHTML(); 
				Y.fire(Y.InputFieldEvent.SUBMIT_MESSAGE, that._editor.getEditorHTML()); 
				that._editor.clearEditorDoc(); 
				that._editor.resetValue();  
				that._editor.focus();
			}
		            
			return false; // XXX not the right way to cancel HTML DOM events
		}, this);
		    
		this._editor.render();  
		
    	this.emoticonsOverlay.render();
    	this.toggleEmoticonsMenu(null,true); 
   
    	Y.on("click", Y.bind(this.toggleEmoticonsMenu , this), "#toggle-emoticon"  );
		Y.on("click" , Y.bind(this.insertEmoticon, this) , "#emoticonsOverlay" );
		 
     },
     
     
     insertEmoticon : function(e)
     { 
     	var emoticonUrl = e.target.get("src"); 
     	if(!emoticonUrl)
     		return; 
     	this._editor.execCommand('inserthtml', '<img  style="height:14px;vertical-align:middle;_moz_resizing=false; margin-right:5px; margin-left:5px;" src="'+ emoticonUrl +'" >');
     	this.toggleEmoticonsMenu(null,true);
     	this._editor.focus(); 
     },
    
    toggleMenu : function(visibility)
    {
    	if(this._timer.hideShowMenu)
   	 		this._timer.hideShowMenu.cancel();
   	 	
   	 	var toolbarContainer = Y.get(".yui-toolbar-container");
     	if(toolbarContainer && toolbarContainer.getStyle("visibility") == "visible" )
     		return;
   	 	 
    	var editorToggler =  Y.get("#toggle-editor");
		var emoticonToggler = Y.get("#toggle-emoticon");
		var sendButton = Y.get("#sendButton");
		
		editorToggler.setStyle("visibility" , visibility);
		sendButton.setStyle("visibility" , visibility);
		emoticonToggler.setStyle("visibility" , visibility);
    },
    
    toggleToolbar : function (e, hide)
	{
	  
		if(this._timer && this._timer.hideShowMenu)
   	 		this._timer.hideShowMenu.cancel(); 
   	 	
		var toolbarContainer = Y.get(".yui-toolbar-container"); 
		if(!toolbarContainer)
			return; 
		
		var toggler =  Y.get("#toggle-editor");
		if(hide == null)
		{
			this.toggleEmoticonsMenu(null,true);
			hide = toggler.hasClass("toggle-editor-on");
		} 
		    		
		var xy = toggler.getXY();
		var viewportXY = [toolbarContainer.get("winWidth") , toolbarContainer.get("winHeight")];
		var toolbarHeight = parseFloat( toolbarContainer.getStyle("height") );
		var toolbarWidth = parseFloat( toolbarContainer.getStyle("width") );
		    		
		var yMargin = toolbarHeight + xy[1] + 30 > viewportXY[1] ? -30 : 30;
		var xMargin = toolbarWidth + xy[0] > viewportXY[0] ? - toolbarWidth + 30 : 0;
		    		
		toolbarContainer.setX(xy[0]+xMargin);
		toolbarContainer.setY(xy[1]+yMargin); 
		
		    	 
		var visibility = hide ? "hidden" : "visible";
		if(!hide)
			toggler.addClass("toggle-editor-on"); 
		else
			toggler.removeClass("toggle-editor-on"); 
					     
			    
		toolbarContainer.setStyle("visibility" , visibility);	 
	},
	  
     toggleEmoticonsMenu : function (e, hide) {
        
     	if(hide == null)
     	{
     	 	this.toggleToolbar(null, true);
     		hide = Y.get("#toggle-emoticon").hasClass("toggle-emoticon-on");
     	 }
     	
     	
     	if(this._timer && this._timer.hideShowMenu)
   	 		this._timer.hideShowMenu.cancel();
     	 
      
     	if(hide)
     		this.emoticonsOverlay.hide();
     	else
     		this.emoticonsOverlay.show();
     	
     	var emoticonToggler = Y.get("#toggle-emoticon");
     	var xy = emoticonToggler.getXY();
		var viewportXY = [emoticonToggler.get("winWidth") , emoticonToggler.get("winHeight")];
		
		var emoticonsOverlayHeight = parseFloat( Y.get("#emoticonsOverlay").getStyle("height") );
		var emoticonsOverlayWidth = parseFloat(Y.get("#emoticonsOverlay").getStyle("width") );
		    		
		var yMargin = emoticonsOverlayHeight + xy[1] + 30 > viewportXY[1] ? - emoticonsOverlayHeight -1 : 30;
		var xMargin = emoticonsOverlayWidth + xy[0] > viewportXY[0] ? - emoticonsOverlayWidth + 10 : 0;
	  
        this.emoticonsOverlay.move(xy[0]+xMargin,xy[1]+yMargin);
        
        if(!hide)
			emoticonToggler.addClass("toggle-emoticon-on"); 
		else
			emoticonToggler.removeClass("toggle-emoticon-on"); 
        
     }, 
        /*
         * Destruction Code: Clears event handles, timers,
         * and current trigger information
         */
        destructor : function() {
            this._clearCurrentTrigger();
            this._clearTimers();
            this._clearHandles();
        },
 
        /*
         * bindUI is used to bind attribute change and dom event
         * listeners
         */
        bindUI : function() {
           
             
        }, 
        /*
         * syncUI is used to update the rendered DOM, based on the current
         * InputField state
         */
        syncUI : function() {
          
        },

 
 
        /*
         * Cancel any existing show/hide timers
         */
        _clearTimers : function() {
            var timer = this._timer;
           if(timer.hideShowMenu)
           {
           		timer.hideShowMenu.cancel();
           		timer.hideShowMenu = null;
           }
        },
 
        /*
         * Detach any stored event handles
         */
        _clearHandles : function() {
            var eventHandles = this._eventHandles;
 
        }
    }); 
 
    //InputField = Y.Base.build(InputField.NAME, InputField, [Y.WidgetPosition, Y.WidgetStack], {dynamic:false});
	Y.InputField = InputField; 
//});
} , 0.1 );